import {
  Collapse,
  Input,
  Pagination,
  Space,
  Card,
  Menu,
  Tree,
  Button
} from "antd";
import { DownOutlined } from "@ant-design/icons";
import React from "react";
import styles from "./style.less";
import { connect } from "dva";
import router from "umi/router";
const { Search } = Input;
const { Panel } = Collapse;
const { SubMenu } = Menu;

@connect(({global})=>({userId: global.userId}))
class HelpDOC extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      typeIndex: 0,
      sortIndex: 0,
      menuList: [],
      typeList: [],
      pageNum: 0,
      pageSize: 5,
      total: 0,
      id: "",
      title: "",
      content: "",
      treeData: [],
      inputValue: "",
      ids: ""
    };
  }

  //生命周期回调--帮助
  componentDidMount = () => {
    this.getHelp();
    this.getHelpByPage();
  };
  //帮助目录
  getHelp = () => {
    this.props
      .dispatch({
        type: "global/getHelp",
        payload: {}
      })
      .then(res => {
        this.handleTreeData(res.data);
        this.setState({ menuList: res.data });
      });
  };
  //获取目录下文章的
  // getHelpBycatalogId = () => {
  //   this.props
  //     .dispatch({
  //       type: "global/getHelpBycatalogId",
  //       payload: {
  //         id: this.state.idList
  //       }
  //     })
  //     .then(res => {
  //       console.log("getHelpBycatalogId", res.data);
  //       if (res && res.data.length > 0) {
  //         this.setState({
  //           typeList: res.data,
  //           total: res.data.length,
  //           id: res.data.id
  //         });
  //       }
  //     });
  // };
  //帮助分页
  getHelpByPage = () => {
    let { pageSize, pageNum, id, title, content, ids } = this.state;
    this.props
      .dispatch({
        type: "global/getHelpByPage",
        payload: {
          pageSize: pageSize,
          pageNum: pageNum === 0 ? 1 : pageNum,
          title: title,
          content: content,
          catalog: "",
          parentId: id,
          // inputValue: ""
          ids: ids
        }
      })
      .then(res => {
        this.setState({
          typeList: res.data.rows,
          total: res.data.total,
          id: res.data.id
        });
      });
  };
  //树
  handleTreeData = arr => {
    arr.map(item => {
      item.title = item.catalog;
      item.key = item.id;
      if (item.children.length > 0) {
        item.title = item.catalog;
        item.key = item.id;
        this.handleTreeData(item.children);
      }
    });
    return arr;
  };
  //分页
  pageChange = (page, pageSize) => {
    this.setState({ pageSize: pageSize, pageNum: page }, () => {
      this.componentDidMount();
    });
  };
  pageSizeChange = (current, size) => {
    this.setState({ pageSize: size, pageNum: 1 }, () => {
      this.componentDidMount();
    });
  };

  handleRouterPage = id => {
    router.push({
      pathname: `/helpdocdetail/${id}`
    });
  };

  handleTypeChange = e => {
    this.setState({
      typeIndex: Number(e.target.getAttribute("data-index"))
    });
  };
  //点击目录
  handleToSearch = (selectedKeys, e) => {
    let ids1 = "";
    ids1 += e.node.id;
    if (e.node.children.length > 0) {
      e.node.children.map(item => {
        if (ids1.indexOf(item.id) === -1) {
          ids1 += "," + item.id;
        }

        if (item.children.length > 0) {
          item.children.map(item1 => {
            if (ids1.indexOf(item1.id) === -1) {
              ids1 += "," + item1.id;
            }
          });
        }
      });
    }
    this.setState(
      {
        ids: ids1,
        pageNum: 1
      },
      () => {
        this.getHelpByPage();
      }
    );
  };

  onSearch = value => {
    this.setState(
      {
        title: value,
        pageNum: 1
      },
      () => {
        this.getHelpByPage();
      }
    );
  };
  inputChange = e => {
    this.setState({
      inputValue: e.target.value
    });
  };
  getClear = () => {
    this.setState({
      inputValue: ""
    });
  };
  render() {
    const { typeIndex, total, inputValue, pageNum } = this.state;

    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>帮助</p>
            <p>Help</p>
          </div>
        </div>
        <div className={styles.contentBody}>
          <div className={styles.clearfix}>
            <div className={styles.fl} style={{width:"25%"}}>
              <div className={styles.leftContent}>
                <Tree
                  treeData={this.state.menuList}
                  style={{
                    fontSize: "18px",
                    fontWeight: 400,
                    lineHeight: "25px",
                    color: "#00b5c1",
                    marginBottom: "15px",
                    marginLeft:"20px"
                  }}
                  switcherIcon={<DownOutlined />}
                  expandAction="click"
                  onSelect={(selectedKeys, e) =>
                    this.handleToSearch(selectedKeys, e)
                  }
                ></Tree>
              </div>
            </div>
            <div className={styles.fl} style={{width:"75%"}}>
              <div className={styles.rightContent}>
                <div className={styles.searchBox}>
                  <Search
                    onChange={e => this.inputChange(e)}
                    value={this.state.inputValue}
                    style={{ height: "50px" }}
                    placeholder="请输入关键字"
                    rows={2}
                    onSearch={this.onSearch}
                    size="large"
                  />
                  <Button style={{ height: "39.99px" }} onClick={this.getClear}>
                    清空
                  </Button>
                </div>
                <div className={styles.listBox}>
                    {this.state.typeList.map((item, index) => {
                      return (
                        <Card
                          style={{ cursor: "pointer",marginBottom:"10px" }}
                          onClick={() => this.handleRouterPage(item.id)}
                        >
                          <p
                            className={styles.typeList}
                            key={index}
                            data-index={index}
                            className={
                              typeIndex === index ? `${styles.active}` : ""
                            }
                            onClick={e => this.handleTypeChange(e)}
                            style={{ margin: 0, padding: 0 }}
                          >
                            {item.title}
                            {/* <span
                              style={{
                                paddingLeft: "15px",
                                fontSize: "2px",
                                color: "blue"
                              }}
                            >
                              点击量：{item.visit}
                            </span> */}
                          </p>
                        </Card>
                      );
                    })}
                  <div className={styles.pagination}>
                    <Pagination
                      total={total}
                      showSizeChanger
                      showQuickJumper
                      current={pageNum === 0 ? 1 : pageNum}
                      defaultCurrent={1}
                      defaultPageSize={5}
                      pageSizeOptions={[5, 10, 20, 50]}
                      showTotal={total => `共 ${total} 条`}
                      onChange={this.pageChange}
                      onShowSizeChange={this.pageSizeChange}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default HelpDOC;
